<template>
    <div class="house-wrapper">
        <div class="view">
            <div class="search-view">
                <div class="search" style="margin-right: 5px;">
                    <span>添加时间：</span>
					<DatePicker v-model="roomData.startTime" type="date" placeholder="请选择" style="width: 150px" :options="options1" @on-change="changeStart"></DatePicker>
				</div>
				<div class="search">
                    <span>至</span>
					<DatePicker v-model="roomData.endTime" type="date" placeholder="请选择" style="width: 150px" :options="options2" @on-change="changeEnd"></DatePicker>
				</div>
                <div class="search">
                    <span>名称：</span>
					<Input v-model="roomData.name" placeholder="请输入会议室名称" style="width: 150px;" />
                </div>
                <div class="search">
                    <span>状态：</span>
					<Select v-model="roomData.state" placeholder="请选择" style="width: 150px;"> 
						<Option :value="0">库存</Option> 
						<Option :value="1">使用</Option> 
						<Option :value="2">维修</Option> 
						<Option :value="3">已删除</Option> 
					</Select>
                </div>
                <div class="search">
                    <Button
                        type="primary"
                        :loading="isLoading"
                        @click="clickSearch">搜索
                    </Button>
                </div>
                 <div class="search fr">
                    <Button 
                        type="primary" 
                        @click="clickAdd">
                        添加设备
                    </Button>
                </div>
            </div>
            <div class="main-view">
                <DeviceManageList 
                    :data="listData"
                    @on-action="clickAction">
                </DeviceManageList>
            </div>
            <div class="page-view">
                <PageView
                    :data="pageData"
                    @on-change-page="changePage"
                    @on-change-pagesize="changePagesize">
                </PageView>
		    </div>
             <!-- 添加设备操作弹框 -->
            <div v-if="addData.isShow">
                <DeviceModal
                    :data="addData"
                    @on-submit="submitAction">
                </DeviceModal>
            </div>
            <!-- 绑定设备 -->
            <div v-if="bindingData.isShow">
                <BindingModal
                    :data="bindingData"
                    @on-submit="submitBinding">
                </BindingModal>
            </div>
        </div>
    </div>
</template>

<script>

import DeviceManageList from '@/view/deviceManage/list/DeviceManageList'
import DeviceModal from '@/view/deviceManage/list/DeviceModal'
import BindingModal from '@/view/deviceManage/list/BindingModal'
import PageView from '@/components/Page'

export default {
    components: {
        DeviceManageList,
        DeviceModal,
        BindingModal,
        PageView
    },
    data () {
        return {
            isLoading: false,
            roomData: {
                startTime: '',
                endTime: '',
                name: '',
                state: ''
            },
            listData: {
                isLoading: false,
				data: [
                    {id: 1, name: '0001', state: 1, address:'制造大街', person: '章三', time: '2018-3-3'},
                    {id: 2, name: '0002', state: 2, address:'制造大街', person: '李四', time: '2018-3-3'},
                ]
            },
            addData: {
				actionType: 1,
				isShow: false,
				row: null,
				data: {}
            },
            bindingData: {
				isShow: false,
				row: null,
				data: {}
            },
            pageData: {
				currentPage: 0,
				pagesize: 20,
				totalSize: 0
            },
            options1: {
                disabledDate (date) {
                    return date && date.valueOf() < Date.now() - 86400000;
                }
            },
            options2: {
                disabledDate: date => {
                    return (date && date.valueOf() < new Date(this.roomData.startTime));
                }
            },
        };
    },
    methods: {
        changePage(page) {
            this.pageData.currentPage = page - 1;
            // this.getRoomList()
        },
        changePagesize(pagesize) {
            this.pageData.pagesize = pagesize;
            // this.getRoomList()
        },
        getRoomList(){ 
            // this.listData.isLoading = true
            // companyService.getQuestionList(this.data, this.pageData.currentPage, this.pageData.pageSize).then(res=>{
            // this.listData.isLoading = false             
            //     let result = res.data
            //     let code = result.rescode
            //     let resmsg = result.msg
            //     if(code == 100){
            //         if(result.data){
            //             this.listData.data = result.data
            //         } else {
            //             this.listData.data = []
            //         }
            //         this.pageData.totalSize = result.totalSize
            //     } else {
            //         this.$Message.error(resmsg)
            //     }
            // }, res=>{
            //     this.listData.isLoading = false                
            //     this.$Message.error('服务器异常，请稍后再试！')
            // })
        },
        clickAdd(){
            this.addData.actionType = 1
            this.addData.isShow = true
            this.addData.row = null
            this.addData.data = {}
        },
        clickAction(type, formData){
            // console.log(type)
            // console.log(formData)
            switch(type) {
                case 'edit': 
                    this.addData.actionType = 2
                    this.addData.isShow = true
                    this.addData.data = formData
                    this.addData.row = formData
                break;
                case 'del':
                    this.clickDel(formData);
                break;
                case 'binding':
                    this.bindingData.isShow = true
                    this.bindingData.data = {}
                    this.bindingData.row = {}
                break;
                case 'relieve':
                    this.clickRelieve(formData)
                break;
            }
        },
        clickSearch(){
            // this.getRoomList()
        },
        changeStart(value){
            this.roomData.startTime = value
        },
        changeEnd(value){
            this.roomData.endTime = value
        },
        submitAction(formData) {
            // companyService.questionSave(formData.data).then(res=>{
            //     let result = res.data
            //     let code = result.rescode
            //     let resmsg = result.msg
            //     if(code == 100){
            //         this.$Message.success(resmsg)
            //         formData.isShow = false
            //         this.getRoomList()
            //     } else {
            //         this.$Message.error(resmsg)
            //     }
            // }, res=>{
            //     this.$Message.error('服务器异常，请稍后再使！')
            // })
        },
        clickDel(formData){
            console.log(formData)
            // companyService.questionDel(formData.id).then(res=>{
            //     // console.log(formData.id)
            //     let result = res.data
            //     let code = result.rescode
            //     let resmsg = result.msg
            //     if(code == 100){
            //         this.$Message.success(resmsg)
            //         this.getProblemList()                    
            //     } else {
            //         this.$Message.error(resmsg)
            //     }
            // }, res => {
            //     this.$Message.error('服务器异常，请稍后再试！')
            // })
        },
        submitBinding(){

        },
        clickRelieve(formData){
            this.$Modal.warning({
                title: '设备解除',
                content: '是否要解除设备绑定！',
                onOk: () => {
                    this.submitRelieve(formData)
                }
            });
        },
        submitRelieve(formData){
           // companyService.questionDel(formData.id).then(res=>{
            //     // console.log(formData.id)
            //     let result = res.data
            //     let code = result.rescode
            //     let resmsg = result.msg
            //     if(code == 100){
            //         this.$Message.success(resmsg)
            //         this.getProblemList()                    
            //     } else {
            //         this.$Message.error(resmsg)
            //     }
            // }, res => {
            //     this.$Message.error('服务器异常，请稍后再试！')
            // })
        }
    }
};
</script>

<style lang="less" scoped>
    .house-wrapper {
        padding: 40px 20px;
        .view {
            background: #fff;
            border: 1px solid #e6e6e6;
            padding: 30px 20px;
            .search-view {
                margin-bottom: 35px;
                .search {
                    margin-right: 30px;
                    display: inline-block;
                }
            }
        }
    }
</style>
